<template>
  <div>
    <h1>拖拽排序</h1>

    <ul id="leftGroup" @dragenter="dragenter" @dragover="dragover" @dragleave="dragleave" @drop="drop">
      <!-- $event可以获取事件 -->
      <li v-for="item in leftGroupList" :key="item" draggable="true" @dragstart="dragstart($event, item)" @drag="drag" @dragend="dragend" :data-item="item" :class="{borderBottom: item == previewDropReleaseTarget}">
        item{{item}}
      </li>
    </ul>

  </div>
</template>

<script>
export default {
  data () {
    return {
      leftGroupList: [],
      // 预览拖拽释放后的位置
      previewDropReleaseTarget: null,
    }
  },
  created () {
    let leftGroupList = [];
    for (let i = 0; i < 10; i++) {
      leftGroupList.push(i + "")
    }
    this.leftGroupList = leftGroupList;
  },
  methods: {
    /** 开始拖拽 可拖动元素时触发 */
    dragstart (dragEvent, item) {
      dragEvent.dataTransfer.setData('dragItem', item);
    },
    /** 拖拽 可拖动元素 的过程中触发 */
    drag (dragEvent) {
    },
    /** 拖拽释放 可拖动元素 时触发 */
    dragend (dragEvent) {
      console.log("dragend", dragEvent);
      this.previewDropReleaseTarget = null;
    },
    /** 当拖拽 可拖动元素 进入容器中时触发 */
    dragenter () {
      console.log("dragenter");
    },
    /** 在容器中 拖拽 可拖动元素过程中触发 */
    dragover (dragEvent) {
      dragEvent.preventDefault();
      //    感知拖动元素 释放后的位置
      let target = dragEvent.target.dataset.item;
      this.previewDropReleaseTarget = target;
    },
    /** 当拖拽 可拖动元素 离开容器中时触发 */
    dragleave () {
      console.log("dragleave");
    },
    /** 在容器中，拖拽释放 可拖动元素时触发 */
    drop (dragEvent) {
      console.log("drop", dragEvent)
      // 获取拖动元素
      let dragItem = dragEvent.dataTransfer.getData('dragItem');
      // 获取target，target为拖动元素的前一个元素
      let target = dragEvent.target.dataset.item;
      if (dragItem == target) {
        return;
      }
      // 删除dragItem
      this.leftGroupList.splice(this.leftGroupList.indexOf(dragItem), 1);
      // 将dragItem放到target后
      this.leftGroupList.splice(this.leftGroupList.indexOf(target) + 1, 0, dragItem);
    },
  }


}
</script>

<style>
#leftGroup {
  background-color: coral;
}
.borderBottom {
  border-bottom: solid red 4px;
}
</style>